// src/stores/app.ts
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'

export const useAppStore = defineStore('app', () => {
    // 响应式状态
    const version = ref('1.0.0')
    const securityInfo = ref('沪ICP备12345678号')
    // 从 localStorage 获取初始折叠状态
    const isCollapse = ref(localStorage.getItem('menuCollapse') === 'true')
    const themeConfig = ref({
        mode: 'light',
        primaryColor: '#409EFF'
    })

    // 监听折叠状态变化并保存到 localStorage
    watch(isCollapse, (val) => {
        localStorage.setItem('menuCollapse', val)
    })

    // 操作方法
    const toggleCollapse = () => {
        isCollapse.value = !isCollapse.value
    }

    const updateVersion = (newVersion) => {
        version.value = newVersion
    }

    // 清除所有本地存储的状态
    const clearState = () => {
        localStorage.removeItem('menuCollapse')
        localStorage.removeItem('activeMenu')
        localStorage.removeItem('openedMenus')
    }

    // 计算属性
    const fullVersion = computed(() => `v${version.value}`)

    return {
        version,
        securityInfo,
        isCollapse,
        themeConfig,
        toggleCollapse,
        updateVersion,
        clearState,
        fullVersion
    }
})